<script setup>
import { reactive, ref, defineProps, watch, toRaw } from "vue";
import dayjs from "dayjs";
const props = defineProps(["tagGraph"]);
let dateModel = reactive({
  dateValue: "",
  dateContentType: "current",
  dateFormat: "YYYY年MM月DD日",
  timeFormat: "",
  yearOffset: 0,
  monthOffset: 0,
  dayOffset: 0,
  hourOffset: 0
});
const dateValueoptions = [
  {
    label: "固定时间",
    value: "current"
  },
  {
    label: "打印出纸时间",
    value: "print"
  }
];
const dateFormatoptions = [
  {
    label: "YYYY年MM月DD日",
    value: "YYYY年MM月DD日"
  },
  {
    label: "YYYY年MM月",
    value: "YYYY年MM月"
  },
  {
    label: "MM月DD日",
    value: "MM月DD日"
  },
  {
    label: "YYYY-MM-DD",
    value: "YYYY-MM-DD日"
  },
  {
    label: "YYYY-MM",
    value: "YYYY-MM"
  },
  {
    label: "MM-DD",
    value: "MM-DD"
  },
  {
    label: "YYYY/MM/DD",
    value: "YYYY/MM/DD"
  },
  {
    label: "YYYY/MM",
    value: "YYYY/MM"
  },
  {
    label: "MM/DD",
    value: "MM/DD"
  }
];
const timeFormatoptions = [
  {
    label: "HH:mm:ss",
    value: "HH:mm:ss"
  },
  {
    label: "HH:mm",
    value: "HH:mm"
  },
  {
    label: "mm:ss",
    value: "mm:ss"
  },
  {
    label: "无",
    value: ""
  }
];
// 监听tagGraph的变化
watch(
  () => props.tagGraph,
  newVal => {
    if (newVal) {
      const activeObject = newVal.getActiveObject();

      if (activeObject) {
        dateModel.dateValue = activeObject.dateValue || "";
        dateModel.dateFormat = activeObject.dateFormat || "YYYY年MM月DD日";
        dateModel.timeFormat = activeObject.timeFormat || "";
        dateModel.yearOffset = activeObject.yearOffset || 0;
        dateModel.monthOffset = activeObject.monthOffset || 0;
        dateModel.dayOffset = activeObject.dayOffset || 0;
        dateModel.hourOffset = activeObject.hourOffset || 0;

        activeObject.on("scaling", e => {
          const scaleY = activeObject.scaleY;
          console.log("scaleY", scaleY);
          console.log("activeObject.height", activeObject.height);

          activeObject.set({
            height: activeObject.height * scaleY,
            scaleY: 1
          });

          activeObject.setCoords();
        });
      }
    }
  },
  {
    immediate: true
  }
);

const handleChangeDateValue = data => {
  const activeObject = props.tagGraph.canvas.getActiveObject();
  let {
    dateValue,
    dateContentType,
    dateFormat,
    timeFormat,
    yearOffset,
    monthOffset,
    dayOffset,
    hourOffset
  } = data;
  // 初始化 dateValue
  dateValue = dayjs(new Date()).format(dateFormat);
  if (timeFormat) {
    dateValue += " " + dayjs(new Date()).format(timeFormat);
  }

  // 把 dateValue 的时间增加偏移量
  let baseDate = dayjs(dateValue, `${dateFormat} ${timeFormat || ""}`.trim());
  if (yearOffset) {
    baseDate = baseDate.add(yearOffset, "year");
  }
  if (monthOffset) {
    baseDate = baseDate.add(monthOffset, "month");
  }
  if (dayOffset) {
    baseDate = baseDate.add(dayOffset, "day");
  }
  if (hourOffset) {
    baseDate = baseDate.add(hourOffset, "hour");
  }

  // 格式化最终的 dateValue
  dateValue = baseDate.format(dateFormat);
  if (timeFormat) {
    dateValue += " " + baseDate.format(timeFormat);
  }

  if (activeObject) {
    props.tagGraph.setCustomProperties("dateValue", dateValue);
    props.tagGraph.setCustomProperties("dateContentType", dateContentType);
    props.tagGraph.setCustomProperties("dateFormat", dateFormat);
    props.tagGraph.setCustomProperties("timeFormat", timeFormat);
    props.tagGraph.setCustomProperties("yearOffset", yearOffset);
    props.tagGraph.setCustomProperties("monthOffset", monthOffset);
    props.tagGraph.setCustomProperties("dayOffset", dayOffset);
    props.tagGraph.setCustomProperties("hourOffset", hourOffset);
    activeObject.set({ text: dateValue });
    props.tagGraph.saveState();
    props.tagGraph.canvas.renderAll();
  }
};
</script>

<template>
  <div>
    <el-form label-position="top">
      <el-form-item label="日期内容">
        <el-select
          v-model="dateModel.dateContentType"
          style="width: 100%"
          @change="handleChangeDateValue(dateModel)"
        >
          <el-option
            v-for="(item, index) in dateValueoptions"
            :key="index"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="日期格式">
        <el-select
          v-model="dateModel.dateFormat"
          style="width: 100%"
          @change="handleChangeDateValue(dateModel)"
        >
          <el-option
            v-for="(item, index) in dateFormatoptions"
            :key="index"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="时间格式">
        <el-select
          v-model="dateModel.timeFormat"
          style="width: 100%"
          @change="handleChangeDateValue(dateModel)"
        >
          <el-option
            v-for="(item, index) in timeFormatoptions"
            :key="index"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="年份增减">
        <el-input-number
          v-model="dateModel.yearOffset"
          style="width: 100%"
          @change="handleChangeDateValue(dateModel)"
        />
      </el-form-item>
      <el-form-item label="月份增减">
        <el-input-number
          v-model="dateModel.monthOffset"
          style="width: 100%"
          @change="handleChangeDateValue(dateModel)"
        />
      </el-form-item>
      <el-form-item label="天数增减">
        <el-input-number
          v-model="dateModel.dayOffset"
          style="width: 100%"
          @change="handleChangeDateValue(dateModel)"
        />
      </el-form-item>
      <el-form-item label="小时增减">
        <el-input-number
          v-model="dateModel.hourOffset"
          style="width: 100%"
          @change="handleChangeDateValue(dateModel)"
        />
      </el-form-item>
    </el-form>
  </div>
</template>
